<template>
  <div class="container">
    <div class="header" v-if="loads">
      <div class="left">
        <!--        <img src="../assets/images/home/logo.png" alt="">-->
        <div class="title">数字孪生平台</div>
      </div>
      <div class="tools">
        <div
          :class="active == menu.name ? 'buttons active' : 'buttons'"
          v-for="menu in menuList"
        >
          <span @click="jump(menu, menu.name)">{{ menu.name }}</span>
          <div class="item_menu" v-if="menu.children">
            <div
              class="item_btn"
              @click="jump(i, menu.name)"
              v-for="i in menu.children"
            >
              {{ i.name }}
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <img
          src="../assets/images/home/setting.png"
          alt=""
          title="设置效果"
          @click="animite = !animite"
        />
      </div>
    </div>
    <keep-alive>
      <router-view
        class="router"
        :animiteFlag="animite"
        @loadSuccess="loads = true"
        :gq="gq"
      >
      </router-view>
    </keep-alive>
  </div>
</template>

<script>
import ScaleBox from "vue2-scale-box";
export default {
  name: "layout",
  components: { ScaleBox },
  data() {
    return {
      loads: false,
      nowTime: "",
      nowDate: "",
      nowWeek: "",
      timer: null,
      menuList: [
        {
          name: "智慧城市",
          path: "/",
          names: "智慧城市",
        },
        {
          name: "智慧农业",
          children: [
            {
              name: "农业园区",
              path: "/nongye",
              names: "智慧农业",
            },
            {
              name: "种植园区",
              path: "/zhongzhi",
              names: "智慧农业",
            },
          ],
        },
        {
          name: "智慧园区",
          children: [
            {
              name: "经典园区",
              path: "/yuanqu",
              names: "智慧园区",
            },
            {
              name: "化工园区",
              path: "/huagong",
              names: "智慧园区",
            },
          ],
        },
        {
          name: "智慧校园",
          path: "/xiaoyuan",
          names: "智慧校园",
        },
        {
          name: "智慧社区",
          path: "/shequ",
          names: "智慧社区",
        },
        {
          name: "智慧交通",
          path: "/jiaotong",
          names: "智慧交通",
        },
        {
          name: "智慧水务",
          path: "/shuiwu",
          names: "智慧水务",
        },
        {
          name: "智慧后勤",
          path: "/houqin",
          names: "智慧后勤",
        },
        {
          name: "公司愿景",
          path: "/yuanjing",
          names: "公司愿景",
        },
      ],
      active: "智慧城市",
      animite: false,
      gq: "",
    };
  },
  created() {
    // 沈阳市天气接口
    // http://t.weather.itboy.net/api/weather/city/101070101
    if (this.timer) clearInterval(this.timer);
    this.timer = setInterval(() => {
      this.setNowTimes();
    }, 1000);
  },
  methods: {
    jump(item, name) {
      this.menuList.forEach((i) => {
        if (i.names == name) {
          this.active = i.name;
        } else {
          i.children &&
            i.children.forEach((j) => {
              if (j.names == name) {
                this.active = i.name;
              }
            });
        }
      });
      this.gq = item.name;
    },
    setNowTimes() {
      //获取当前时间
      let myDate = new Date();
      let wk = myDate.getDay();
      let yy = String(myDate.getFullYear());
      let mm = myDate.getMonth() + 1;
      let dd = String(
        myDate.getDate() < 10 ? "0" + myDate.getDate() : myDate.getDate()
      );
      let hou = String(
        myDate.getHours() < 10 ? "0" + myDate.getHours() : myDate.getHours()
      );
      let min = String(
        myDate.getMinutes() < 10
          ? "0" + myDate.getMinutes()
          : myDate.getMinutes()
      );
      let sec = String(
        myDate.getSeconds() < 10
          ? "0" + myDate.getSeconds()
          : myDate.getSeconds()
      );
      let weeks = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];
      let week = weeks[wk];
      this.nowDate = yy + "-" + mm + "-" + dd;
      this.nowTime = hou + ":" + min + ":" + sec;
      this.nowWeek = week;
    },
  },
};
</script>

<style scoped lang="scss">
@keyframes flyInTop {
  from {
    opacity: 0;
    transform: translateY(-80%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.container {
  width: 100%;
  height: 100%;
  position: relative;
  .header {
    width: 100%;
    height: 70px;
    position: fixed;
    top: 0;
    z-index: 10;
    display: flex;
    animation: flyInTop 1s linear;
    .left {
      width: 408px;
      height: 70px;
      position: relative;
      img {
        width: 44px;
        height: 32px;
        position: absolute;
        top: 21px;
        left: 23px;
      }
      .title {
        height: 32px;
        line-height: 32px;
        position: absolute;
        top: 20px;
        font-size: 24px;
        font-weight: bold;
        color: #ffffff;
        letter-spacing: 4px;
        left: 20px;
      }
    }
    .right {
      width: 408px;
      height: 70px;
      position: relative;
      .weather {
        width: 335px;
        height: 100%;
        display: flex;
        color: #ffffff;
        .time {
          width: 90px;
          height: 70px;
          line-height: 70px;
          font-size: 20px;
          font-weight: bold;
          text-align: center;
        }
        .week {
          width: 100px;
          height: 70px;
          font-size: 16px;
          display: flex;
          flex-direction: column;
          text-align: center;
          > div {
            height: 35px;
            &:first-child {
              line-height: 50px;
            }
            &:last-child {
              line-height: 20px;
            }
          }
        }
        .wath {
          flex: 1;
          height: 70px;
          line-height: 70px;
          font-size: 20px;
          img {
            width: 40px;
            height: 40px;
            position: relative;
            top: 15px;
          }
        }
      }
      > img {
        width: 32px;
        height: 32px;
        position: absolute;
        top: 21px;
        right: 23px;
        cursor: pointer;
      }
    }
    .tools {
      flex: 1;
      display: flex;
      height: 100%;
      flex-wrap: nowrap;
      justify-content: space-evenly;
      flex-direction: row;
      align-items: center;
      padding: 0 120px;
      position: relative;
      .buttons {
        height: 70px;
        line-height: 70px;
        font-size: 18px;
        color: #ffffff;
        cursor: pointer;
        position: relative;
        text-align: center;
        .item_menu {
          position: absolute;
          top: 55px;
          left: 50%;
          display: none;
          transform: translateX(-50%);
          width: 100px;
          border-top: 3px solid #ffffff;
          background: rgba(39, 49, 54, 0.5);
          padding: 10px 5px;
          .item_btn {
            height: 30px;
            line-height: 30px;
          }
          .item_btn:hover {
            font-size: 20px;
            font-weight: bold;
          }
        }
        &:hover .item_menu {
          display: block;
        }
      }
      .active > span,
      .buttons:hover > span {
        font-size: 22px;
        font-weight: bold;
      }
    }
  }
  .router {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}
</style>
